<template>
	<view class="navbar">
		<view class="navbar_continar" :style="{background: 'rgba(15, 17, 56,'+alpha+')'}">
			<!-- 状态栏,解决小程序顶部状态位置问题 -->
			<view :style="{height:statusBarHeight + 'px'}"></view>

			<view class="navbar_content" :style="{height:navBarHeight+'px', width: widowHeight+'px'}">
				<view class="navbar_input" @click="gogogo">
					<view class="navbar_icon">
						<!-- 使用uniapp自带的icon库,需要重启才能生效 https://ext.dcloud.net.cn/plugin?id=28#rating -->
						<uni-icons type="person" color='#ccc' size="16px"></uni-icons>
					</view>
					<text class="navbar_text">找机器猫问问</text>
				</view>
				<view @click="openTo" class="qiandao">
					<image :style="{height:30+'px', width: 30+'px'}" src="../../static/icon/qiandao.png" mode=""></image>
				</view>
			</view>

			<!-- <text>导航栏</text> -->

		</view>
		<view :style="{height:navBarHeight+statusBarHeight+'px'}"></view>
		<!-- <view :style="{height:230+'px'}"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight: 40,
				widowHeight: 375,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500
			};
		},
		props:{
			
				alpha:{
					type:Number,
					default:0
				},
		},
		created() {
			// 同步获取手机信息 , statusBarHeight 为导航栏的高度
			const info = uni.getSystemInfoSync();
			// 给状态栏赋值当前手机的状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.widowHeight = info.windowWid
			// H5 app mp-alipay 不支持当前API需要写条件编译
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			//获取小程序中 的胶囊位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 自动获取小程序的navbar的高度 = (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度)
			let navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			this.navBarHeight = navBarHeight
			this.widowHeight = menuButtonInfo.left
			// console.log(navBarHeight);
			// #endif
		},
		methods:{
			openTo(){
				uni.navigateTo({
					url:"/pages/views/sigin/sigin",
				})
			},
			gogogo(){
				uni.navigateTo({
					url:'/pages/views/jiqiren/jiqiren'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar_continar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		box-sizing: border-box;
		width: 100%;
		// background: $my-bg-color;
		// height: 230px;
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		// align-items: center;
		.swiper{
			height: 100%;
		}
		.page-section-spacing {
			height: 100%;
			position: absolute;
			z-index: -1;
			width: 100%;
			top: 0;
			.swiper-item{
				border-radius: 20px;
			}
		}

		.navbar_flex {
			// height:35px;
			// width: 100%;
		}

		.navbar_content {
			box-sizing: border-box;
			display: flex;
			// flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 0 15px;
			height: 45px;
			.qiandao{
				margin-left: 15px;
				height: 30px;
				width: 30px;
			}
			.navbar_input {
				background: #fff;
				height: 30px;
				border-radius: 15px;
				width: 100%;
				display: flex;
				align-items: center;
				padding-left: 15px;

				.navbar_icon {
					// width: 180rpx;
					// padding: 30rpx 10rpx;
					// text-align: center;
					// flex-direction: column;
					// width: 10px;
					// height: 10px;
					// border-radius: 50%;
					// border: 1px solid #ccc;
					margin-right: 5px;
				}

				.navbar_text {
					color: #ccc;
				}
			}

		}
	}
</style>
